<html>
<title>路由</title>

<head>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="container">
        <div>
            <!-- 使用router-link定义导航，to指定目标路径 -->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>

    <script>
        // 1.定义组件
        var home={
            template:'<h3>我是主页</h3>'
        }

        var news={
            template:'<h3>我是新闻</h3>'
        }

        // 2.配置路由
        const routes=[
            {path:'/home',component:home},
            {path:'/news',component:news}
        ]

        //3.创建路由实例
        const router=new VueRouter({
            routes
        })

        // 4.注入路由
        var vm = new Vue({
            el: "#container",
            router
        });
    </script>

</body>

</html>